<template>
	<view class="container">
		<view class="ad">
			<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-sglprtcldw0i262543/17b00160-3abe-11eb-bc56-c9cea619f663.png"
			 class="ad-img"></image>
		</view>

		<view class="noticeBar">
			<view class="noticeBox">
				<view class="notice" @click="open">
					<uni-popup ref="popup" type="center" animation="true">
						<view class="popBox">
							<view class="title">领养须知</view>
							<scroll-view scroll-y="true" class="box-info">

								<view class="zhengwen">
									<view id="no1" class="duanluo">
										我们坚持伴侣动物利益至上的原则，把主人的爱心和责任心列为领养的首要条件。
									</view>
									<view id="no2" class="duanluo">
										1)领养人须年满十八周岁(需携带身份证件) ,有正当职业或良好经济能力，有固定住所，学生领养 的需由家长作为申请人领养。(学生宿舍 与店面饲养的不予考虑)
									</view>
									<view id="no3" class="duanluo">
										2)领养人有爱心和责任感，其家庭成员也有同样的爱心可以接纳动物的加入。
									</view>
									<view id="no4" class="duanluo">
										3)同意并签定领养协议，愿意配合回访工作。
									</view>
									<view id="no5" class="duanluo">
										4)领养猫咪的，同意为猫适龄绝育(公猫7个月， 母猫6个月) ,定期疫苗(每年注射一次)
									</view>
									<view id="no6" class="duanluo">
										领养狗的，同意为狗适龄绝育(公狗7个月， 母狗6个月)，定期疫苗(每年注射一次)
									</view>
									<view id="no7" class="duanluo">
										领养狗的，同意为狗适龄绝育(公狗7个月， 母狗6个月)，定期疫苗(每年注射一次)
									</view>
								</view>

								<view class="chengxu">
									<view id="no-1" class="duanluo">
										领养程序:
									</view>
									<view id="no-2" class="duanluo">
										1)通过在“自来宠”领养列表页面里对你所喜欢的那只待领养宝贝介绍及领养要求，若有理想的领养对象，可通过页面上的联系方式联系。
									</view>
									<view id="no-3" class="duanluo">
										2)和送养人沟通后，亲自看望猫猫狗狗,通过接触了解其性格习性等，若进-步证实是您的理想领养对象，请您回家慎重思考并与家人全面沟通。
									</view>
									<view id="no-4" class="duanluo">
										3)符合领养条件的，我们将上]看环境是否适合养 狗猫及做进一步沟通。
										而确认无问题后，领养人可以准备的用品同时我们将着手准备将被领养猫咪送至领养人家中，领养人凭身份证件办理领养手续(需携带一份身份证复印件)，签署领养协议后,您就可以和您心爱的猫咪共同生活了。经过一周的试养，如无任何问题，则领养成功。
									</view>
									<view id="no-5" class="duanluo">
										4)回访:在领养完成后，将对领养家庭进行回访。回访形式根据领养人实际情况选择上门、即时视频等方式。回访是为了了解被领养的小动物在新家的 适应情况，了 解领养人是否按协议规定履行了相关的义务。

									</view>
									<view id="no-6" class="duanluo">
										注:领养须知及程序最终解释权归《自来宠》所有
									</view>
								</view>



							</scroll-view>
							<view class="popBtu" @click="close">确定收到</view>
						</view>

					</uni-popup>
				</view>
				<view class="notice"></view>
				<view class="notice"></view>
			</view>
		</view>

		<view class="lingyangList">
			<view class="petBox" v-for="(item,index) in petList" :key="index" >
				<view class="petImgBox">
					<image class="petImg" :src="item.p_showBoximg"></image>
				</view>
				<view class="petInfoBox">
					<view class="petState">
						{{item.p_state}}
						<view class="tagWei"></view>
					</view>

					<view class="nemeAndSex">
						<text class="name">{{item.p_name}}</text>
						<view class="sex">
							<image class="sexIcon" :src="sexIcon"></image>
						</view>
					</view>

					<view class="petTypeName">{{item.p_type}}</view>
					<view class="petLocation">
						{{item.p_position}}
					</view>

					<view class="pubilshTime">
						
						{{item.p_publisherTime}} 发布
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				petList: [],
				sexIcon:"../../static/images/icons/man.png"
			}
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			getPetList() {

			},


			onShow() {
				var that=this;
				            uni.getStorage({
				                key: 'petList',
				                success:function(res) {
				                    console.log(res.data);
				                    console.log("获取缓存成功");
				                    that.petList=res.data;
									console.log("that.petList",that.petList)
				                }
				            });
			}

		}
	}
</script>

<style>
	.ad {
		width: 675rpx;
		margin: 0 auto;
		height: 300rpx;
		margin-top: 10px;
	}

	.ad-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.noticeBar {

		width: 90%;
		height: 120rpx;
		margin: 10px auto 0;
		background-image: url("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-sglprtcldw0i262543/60819910-3ac0-11eb-97b7-0dc4655d6e68.png");
		background-size: 675rpx 120rpx;
	}

	.noticeBox {
		width: 100%;
		height: 120rpx;
		/* background-color: rgba(222,222,222,.7); */
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.notice {
		width: 200rpx;
		height: 120rpx;
		/* background-color: #007AFF; */
	}

	.myPop {
		height: 1000rpx;
	}

	.popBox {
		background-color: #FFFFFF;
		border-radius: 15px;
		width: 675rpx;
		/* height: 900; */
	}

	.box-info {
		height: 800rpx;
		width: 80%;
		margin: 0 auto;
	}

	.box-info ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}

	.title {
		height: 50rpx;
		width: 100%;
		text-align: center;
		font-size: 20px;
		font-weight: 800;
		line-height: 50rpx;
		margin: 10px 0;
		padding-top: 10px;
	}

	.duanluo {
		font-size: 10px;
		color: #484543;
		text-align: lfet;
	}

	#no1 {
		font-size: 10px;
		color: #ffaa00;
		text-align: center;
	}

	.popBtu {
		height: 35px;
		width: 100%;
		margin: 10px auto;
		text-align: center;
		letter-spacing: 5px;
		color: #555555;
		background-color: #FFFFFF;
		border-top: 1 solid #666;
		box-sizing: border-box;
		border-radius: 0 0 15px 15px;
	}

	.lingyangList {
		width: 90%;
		/* background-color: #007AFF; */
		height: 300px;
		margin: 10px auto;
		padding-top: 10px;
	}

	.petBox {
		width: 100%;
		height: 250rpx;
		margin-bottom: 20px;
		/* background-color: #4CD964; */
	}

	.petImgBox {
		height: 250rpx;
		width: 200rpx;
		background-color: #3F536E;
		float: left;
		border-radius: 5px 5px 0 5px;
		overflow: hidden;

		box-shadow: 1px 5px 4px #7a7a7a;
	}

	.petImg {
		height: 250rpx;
		width: 200rpx;
		object-fit: cover;
	}

	.petInfoBox {
		width: calc(100% - 220rpx);
		height: 180rpx;
		margin-top: 50rpx;
		/* background-color: #A1DCC1; */
		float: right;
		border-radius: 0 5px 5px 0;
		box-shadow: 0px 0px 15px #919191;
		position: relative;
		overflow: hidden;
		padding-left: 10px;
		padding-top: 10px;
	}

	.petState {
		width: 80rpx;
		height: 30rpx;
		font-size: 10px;
		line-height: 30rpx;
		background-color: #FC768A;
		color: white;
		padding: 0 10px 0 15px;
		position: absolute;
		top: 0;
		right: 0;
	}

	.tagWei {
		width: 15px;
		height: 15px;
		position: absolute;
		top: 0;
		left: -10px;
		background-color: #FFFFFF;
		transform: rotate(45deg);
	}

	.nemeAndSex {
		font-size: 14px;
		color: #666666;
		width: 100%;
		height: 40rpx;
		/* background-color: #4CD964; */
	}

	.name {
		float: left;
		margin-right: 5rpx;

	}

	.sex {
		float: left;
	}

	.sexIcon {
		width: 32rpx;
		height: 32rpx;
		padding-top: 5rpx;
	}

	.petTypeName {
		width: 100%;
		height: 30rpx;
		/* background-color: #007AFF; */
		margin-top: 2px;
		font-size: 10px;
		color: #bdbdbd;
	}

	.petLocation {
		font-size: 12px;
		color: #555555;
		float: left;
	}

	.pubilshTime {
		width: calc(100% - 10px);
		text-align: right;
		font-size: 12px;
		color: #555555;
		margin-top: 30px;
	}
</style>
